@import '@/styles/variables.scss';

<template>
  <div class="page-container home-container">
    <home-banner />
    <div class="home-content">
      <home-solutions />
      <home-news />
      <home-cases />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HomeBanner from './components/HomeBanner.vue'
import HomeSolutions from './components/HomeSolutions.vue'
import HomeNews from './components/HomeNews.vue'
import HomeCases from './components/HomeCases.vue'

const loading = ref(false)
</script>

<style lang="scss" scoped>
.home-container {
  background: $background-color-light;
  padding: 0;
  max-width: none;
  
  .home-content {
    max-width: $container-width;
    margin: 0 auto;
    padding: $spacing-extra-large $spacing-large;
    
    > * {
      margin-bottom: $spacing-extra-large * 2;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  :deep(.el-card) {
    background: $background-color-lighter;
    border: none;
    border-radius: $border-radius-large;
    box-shadow: $box-shadow-base;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-dark;
    }
  }
  
  @media (max-width: $breakpoint-md) {
    .home-content {
      padding: $spacing-large $spacing-base;
    }
  }
}
</style> 